<template>
	<div class="hotcity">
		<h2>热门城市</h2>
		<ul class="hotcity-top">
			<li v-for="item of hotCity" :key="item.id">{{ item.name }}</li>
		</ul>
	</div>
</template>
<script>
	export default{
		props:["hotCity"]
	}
</script>
<style scoped>
	.hotcity h2{
		font-size:0.24rem;
		margin:0.24rem 0.3rem;
		font-weight:normal;
		color:#212121;
	}
	.hotcity-top{
		background:#fff;
		position:relative;
		overflow:hidden;
	}
	.hotcity-top:before{
		content:"";
		height:100%;
		width:33.33%;
		left:33.33%;
		position:absolute;
		border-left: .02rem solid #ddd;
    	border-right: .02rem solid #ddd;
	}
	.hotcity-top li{
		width:33.33%;
		height: .9rem;
    	line-height: .9rem;
    	font-size: .28rem;
    	text-align: center;
    	border-bottom: .02rem solid #ddd;
    	margin-bottom: -1px;
    	float: left;
    	position: relative;
    	z-index: 10;
    	color: #212121;
	}
</style>